<template>
    <div class="boxcard">
        <el-row>
            <el-col :span="18" :md="{ span: 20 }">
                <span class="text">Dashboard</span>
            </el-col>
            <el-col :span="6" :md="{ span: 4 }">
                <el-button icon="el-icon-download" :class="theme">
                    Generate Report</el-button>
            </el-col>
        </el-row>
        <el-row style="margin:20px ;">
            <el-col :span="12" :md="{ span: 6 }">
                <div class="EARNINGS">
                    <el-row>
                        <el-col :span="18">
                            <div>EARNINGS (MONTHLY)</div>
                            <div class="number">$40</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-s-cooperation"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" :md="{ span: 6 }">
                <div class="EARNINGS Earningsa">
                    <el-row>
                        <el-col :span="18">
                            <div>Earnings (Annual)</div>
                            <div class="number">$215,000</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon">$</div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" :md="{ span: 6 }">
                <div class="EARNINGS tasks">
                    <el-row>
                        <el-col :span="18">
                            <div>TASKS</div>
                            <div class="number">
                                <el-row>
                                    <el-col :span="10">50%</el-col>
                                    <el-col :span="12">
                                        <el-progress :percentage="50" style="width:80px ;margin-top: 12px;"
                                            :stroke-width="9" :show-text="false" :color="color"></el-progress>
                                    </el-col>
                                </el-row>

                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-notebook-2"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" :md="{ span: 6 }">
                <div class="EARNINGS tasksR">
                    <el-row>
                        <el-col :span="18">
                            <div>tasks Requests</div>
                            <div class="number">18</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="icon"><i class="el-icon-chat-dot-round"></i></div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :md="{ span: 18 }" class="earn">
                <div class="EarningsO">Earnings Overview
                    <el-button icon="el-icon-more" class="iconbutton" size="small" @click="show_card = !show_card">
                    </el-button>
                </div>
                <div class="buttoncard button_left" v-show="show_card">
                    Dropdown Header:
                    <el-button class="button" @click="goTop">Action</el-button>
                    <el-button class="button" @click="goTop">Another action</el-button>
                    <el-button class="button button_border" @click="goTop">something else here</el-button>
                </div>
                <div class="Linechart" ref="linechart" id="myChart">
                </div>
            </el-col>
            <el-col :span="24" :md="{ span: 6 }" class="reve">
                <div class="EarningsO">Revenue Sources
                    <el-button icon="el-icon-more" class="iconbutton" size="small" @click="goTopshow = !goTopshow">
                    </el-button>
                </div>
                <div class="buttoncard " v-show="goTopshow">
                    Dropdown Header:
                    <el-button class="button" @click="goTop">Action</el-button>
                    <el-button class="button" @click="goTop">Another action</el-button>
                    <el-button class="button button_border" @click="goTop">something else here</el-button>
                </div>
                <div class="Linechart" ref="circular" id="circular">
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :md="{ span: 12 }">
                <div class="Projects">
                    <div class="EarningsO"> Projects
                    </div>
                    <div class="progress">
                        <el-row style="margin:10px ;">
                            <el-col :span="22">
                                Server Migration
                            </el-col>
                            <el-col :span="2">
                                20%
                            </el-col>
                        </el-row>
                        <el-progress :percentage="20" status="exception" :stroke-width="18" :show-text="false">
                        </el-progress>
                        <el-row style="margin:10px ;">
                            <el-col :span="22">
                                Sales Tracking
                            </el-col>
                            <el-col :span="2">
                                40%
                            </el-col>
                        </el-row>
                        <el-progress :percentage="40" status="warning" :stroke-width="18" :show-text="false">
                        </el-progress>
                        <el-row style="margin:10px ;">
                            <el-col :span="22">
                                Customer Database
                            </el-col>
                            <el-col :span="2">
                                60%
                            </el-col>
                        </el-row>
                        <el-progress :percentage="60" :stroke-width="18" :show-text="false">
                        </el-progress>
                        <el-row style="margin:10px ;">
                            <el-col :span="22">
                                Payout Details
                            </el-col>
                            <el-col :span="2">
                                80%
                            </el-col>
                        </el-row>
                        <el-progress :percentage="80" :color="color" :stroke-width="18" :show-text="false">
                        </el-progress>
                        <el-row style="margin:10px ;">
                            <el-col :span="22">
                                Account Setup
                            </el-col>
                            <el-col :span="2">
                                100%
                            </el-col>
                        </el-row>
                        <el-progress :percentage="100" status="success" :stroke-width="18" :show-text="false">
                        </el-progress>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <div class="bluebox">Primary
                                <div class="boxtext">#4e73df</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="Successbox">Success
                                <div class="boxtext">#1cc88a</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div class="Infobox">Info
                                <div class="boxtext">#36b9cc</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="Warningbox">Warning
                                <div class="boxtext">#f6c23e</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div class="Infobox" style="background-color: #e74a3b;">Danger
                                <div class="boxtext">#e74a3b</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="Warningbox" style="background-color: #858796;">Secondary
                                <div class="boxtext">#858796</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div class="Infobox" style="background-color: #f8f9fc; color: #858796;">Light
                                <div class="boxtext">#f8f9fc</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="Warningbox" style="background-color: #5a5c69;">Dark
                                <div class="boxtext">#5a5c69</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="24" :md="{ span: 12 }">
                <div class="Projects" style="height:450px ;">
                    <div class="EarningsO"> Illustrations
                    </div>
                    <div class="img">
                        <img :src="imgUrl" alt="" srcset="" class="img" />
                    </div>
                    <p>Add some quality, svg illustrations to your project courtesy of <a class="atext" target="_blank"
                            rel="nofollow" href="https://undraw.co/">unDraw</a>, a
                        constantly updated collection of beautiful svg images that you can use
                        completely free and without attribution!</p>
                    <div style="padding-left:20px ;">
                        <a target="_blank" rel="nofollow" href="https://undraw.co/" class="atext">Browse Illustrations
                            on
                            unDraw →</a>
                    </div>
                </div>
                <div class="Projects" style="height:280px ; ">
                    <div class="EarningsO" style="border-bottom:1px solid rgb(170, 173, 194) ; "> Development Approach
                    </div>
                    <p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and
                        poor page performance. Custom CSS classes are used to create custom components and custom
                        utility classes.</p>
                    <p>Before working with this theme, you should become familiar with the Bootstrap framework,
                        especially the utility classes.</p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
//src\assets\picture\Illustrations.PNG
import imgPath from "../../assets/picture/Illustrations.png";
import { optiontwo, option } from "../../utils/echart_date";
import { gotop,handleScroll } from "../../utils/gotop"
export default {
    name: 'sbadmin',
    data() {
        return {
            color: '#2baf7f',
            show_card: false,
            goTopshow: false,
            imgUrl: imgPath,
            theme:''
        }
    },
     computed: {
    changetheme() {
      return this.$store.state.theme
    }
  },
  watch: {
    changetheme: {
      handler(newval) {
        this.theme = newval
      },
      immediate: true,
      deep: true
    }
  },
    mounted() {
        this.drawLine()
        window.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
       window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        handleScroll() {
            this.scrollTop =handleScroll()
        },
        goTop() {
            gotop(this.scrollTop)
            this.show_card = false;
            this.goTopshow = false
        },
        drawLine() {
            let myChart = this.$echarts.init(this.$refs.linechart, "macarons");
            myChart.setOption(option)
            let CirChart = this.$echarts.init(this.$refs.circular, "macarons");
            CirChart.setOption(optiontwo)
            //图表自适应
            window.addEventListener("resize", function () {
                myChart.resize()  // myChart 是实例对象
            })
        }
    }
}
</script>

<style scoped lang="less">
@import '../../assets/less/theme.less';
@import '../../assets/less/common.less';
.EARNINGS {
    width: 80%;
    border-left: 4px solid rgb(78, 115, 223);
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    padding: 20px 10px;
    font-size: 11.2px;
    font-weight: 700;
    color: rgb(78, 115, 223);
    margin-top: 20px;

}

.Earningsa {
    border-left: 4px solid rgb(28, 200, 138);
    color: rgb(28, 200, 138);
    margin-top: 20px;
}

.atext {
    color: rgb(78, 115, 223);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none
}

.tasks {
    border-left: 4px solid rgb(54, 185, 204);
    color: rgb(54, 185, 204);
    margin-top: 20px;
}

.tasksR {
    margin-top: 20px;
    border-left: 4px solid rgb(246, 194, 62);
    color: rgb(246, 194, 62);
}

.earn {
    width: 55%;
    height: 400px;
    border-left: 0px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    margin: 20px;
}

.reve {
    width: 35%;
    height: 400px;
    border-left: 0px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    margin: 20px;
}

@media screen and (max-width: 900px) {
    .reve {
        width: 90%;
    }

    .earn {
        width: 90%;
    }
}

.number {
    margin: 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: rgb(90, 92, 105);
}

.icon {
    color: rgb(221, 223, 235);
    font-size: 40px;

}

.EarningsO {
    height: 20px;
    color: rgb(78, 115, 223) ;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.2px;
    background-color: rgb(248, 249, 252);
    padding: 15px;
}

.Projects {
    width: 95%;
    height: 380px;
    border-left: 0px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
    border-radius: 5px;
    margin: 20px;
    color: rgb(133, 135, 150);
    font-size: 12.8px;
    font-weight: 700;
    line-height: 15.3667px;
}

.bluebox {
    width: 76%;
    height: 40px;
    border-radius: 5px;
    background-color: #4e73df;
    color: rgb(255, 255, 255);
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 95px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
}

.Successbox {
    width: 76%;
    height: 40px;
    border-radius: 5px;
    background-color: #1cc88a;
    color: rgb(255, 255, 255);
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 95px;
    margin-left: 8px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
}

.Infobox {
    width: 76%;
    height: 40px;
    border-radius: 5px;
    background-color: #36b9cc;
    color: rgb(255, 255, 255);
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
}

.Warningbox {
    width: 76%;
    height: 40px;
    border-radius: 5px;
    background-color: #f6c23e;
    color: rgb(255, 255, 255);
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    margin-left: 8px;
    box-shadow: 0px 0px 18px 18px rgba(207, 207, 207, 0.4);
}

.boxtext {
    font-size: 12px;
    font-weight: 500;
    color: rgb(187, 188, 199);
    margin-top: 5px;
}

p {
    padding: 0 10px;
    color: rgb(136, 139, 157);
    font-size: 16px;
    font-weight: 350;
    line-height: 28px;
    text-decoration: none
}

.progress {
    padding: 0px 20px;
}

.img {
    width: 480px !important;
    height: 250px !important;

}

.iconbutton {
    border: 0;
    float: right;
}

.Linechart {
    width: 100%;
    height: 300px;
    border-top: 1px solid rgb(209, 206, 206);
}

.buttoncard {
    width: 180px;
    height: 150px;
    background-color: rgb(254, 254, 254);
    border: 0px solid rgb(136, 139, 157);
    margin-top: -15px;
    margin-left: 100px;
    border-radius: 5px;
    position: absolute;
    box-shadow: 0px 0px 5px 5px rgba(232, 232, 232, 0.4);
    z-index: 11;
    text-align: center;
    color: rgb(183, 185, 204);
    font-size: 11px;
    font-weight: 800;
    line-height: 25px;
}

.button {
    color: rgb(95, 96, 104);
    border: 0;
    width: 150px;
    text-align: left;
    margin-left: 0px !important;
}

.button_border {
    border-top: 1px solid rgb(216, 216, 226);
    border-radius: 0px;
}

.button_left {
    margin-left: 380px;
}
</style>